<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>

		<view class="question" @click="tipBtn">
			<u-icon name="question" color="#fff" size="28"></u-icon>
		</view>
		<scroll-view style="height: 90vh;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@scrolltolower="scrolltolower" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">

			<view class="u-page" v-if="tabCurrentIndex === 0">
				<view class="u-demo-block" v-for="(item,index) in myList" :key="item.id">
						<view class="phone-box" @click="getMobile(item.order_accounts)">
							<u-icon name="phone" color="#2979ff" size="20"></u-icon>
						</view>
					<view class="u-demo-block__title">
						<view class="top-left-button">
							<u-tag size="mini" text="已完成" shape="circle" type="success" v-if="item.is_complete === '1'">
							</u-tag>
							<u-tag size="mini" text="已付款" shape="circle" type="warning" v-else-if="item.is_pay === '1'">
							</u-tag>
							<u-tag size="mini" text="待付款" shape="circle" type="error" v-else></u-tag>
						</view>
						<view class="top-right-time">
							{{$u.timeFormat((new Date(item.time.replace(new RegExp("-","gm"),"/"))).getTime())}}
						
						</view>
					</view>
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar">
								<image
									:src="item.pb_info ? item.pb_info : 'https://abc.apricity.asia/public/icon/1.jpg'"
									mode="" style="width: 32px;height: 32px;border-radius: 50%;"></image>
							</view>
							<view class="album__content">
								<u--text :text="'跑腿信息:' + item.help_information" size="14"></u--text>
								<u--text margin="0 0 0 0" :text="'起点:' + item.pick_location" size="14"></u--text>
								<u--text margin="0 0 0 0" :text="'目的地:' + JSON.parse(item.address).address" size="14">
								</u--text>
								<u--text v-if="item.order_accounts" margin="0 0 0 0"
									:text="'配送人:' + item.order_accounts" size="14"></u--text>
								<u--text size="17" type="error" mode="price" :text="item.money"></u--text>
								<view class="errand-btn" v-if="item.is_complete === '1'">
									<view class="errand-btn-left">

									</view>
									<view class="errand-btn-right">
										<view class="contact-box">
											<u-button @click="navaGoToChat(item)"  shape="circle" size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
												<u-badge v-if="item.order_number === orderNumber" style="zIndex: 9999;" :absolute="true" :offset="[-5,0]" value="..." type="error"></u-badge>
										</view>
										<u-button type="primary" shape="circle" size="mini"
											@click="delUserOrder(item.id)" text="删除订单"></u-button>
									</view>
								</view>
								<view class="errand-btn" v-else-if="item.is_complete === '2'">
									<view class="errand-btn-left">

									</view>
									<view class="errand-btn-right">
										<view class="contact-box">
											<u-button @click="navaGoToChat(item)"  shape="circle" size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
												<u-badge v-if="item.order_number === orderNumber" style="zIndex: 9999;" :absolute="true" :offset="[-5,0]" value="..." type="error"></u-badge>
										</view>
										<u-button type="primary" shape="circle" size="mini"
											@click="userConfirmGetErrandSuccess(item.id)" text="确认收货"></u-button>
									</view>
								</view>
								<view class="errand-btn" v-else-if="item.is_complete === '0' && item.is_pay === '1'">
									<view class="errand-btn-left">

									</view>
									<view class="errand-btn-right">
										<u-button type="primary" shape="circle" size="mini"
											 text="加价"></u-button>
										<u-button type="primary" shape="circle" size="mini"
											@click="userCanceMoney(item)" text="申请退款"></u-button>
									</view>
								</view>

								<view class="errand-btn" v-else-if="item.is_pay === '0'">
									<view class="errand-btn-left">

									</view>
									<view class="errand-btn-right">
										<view class="contact-box">
											<u-button  shape="circle" size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
												<u-badge v-if="item.order_number === orderNumber" style="zIndex: 9999;" :absolute="true" :offset="[-5,0]" value="..." type="error"></u-badge>
										</view>
										<u-button type="primary" shape="circle" size="mini" text="立即付款"></u-button>
									</view>
								</view>



							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-else-if="tabCurrentIndex === 1">
				<view class="list-item" v-for="(item,index) in shopList" :key="item.id">
					<view class="list-item-head">
						<view class="list-item-head-left">
							订单号 {{item.orderNumber}}
						</view>
						<view class="list-item-head-right">
							待收货
						</view>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item" v-for="(item2,index2) in JSON.parse(item.shopList)"
							:key="index2">
							<view class="list-item-content-left">
								{{item2.introduce}}
							</view>
							<view class="list-item-content-right">
								<text :style="{marginRight: '10px'}">×{{item2.number}}</text>
								<u-button @click="shopGoToChat(item2,item.orderNumber,item.userAccounts)"  shape="circle" size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
							</view>
						</view>
					</view>
					<view class="list-item-bottom">
						<view class="list-item-bottom-left">
							共计<text class="list-item-bottom-left-price">￥{{item.sumPrice}}</text>元
						</view>
						<view class="list-item-bottom-right">
					
							
							<u-button  @click="userConfirmShopSuccess(item.orderNumber)" shape="circle" text="确认收货" type="error" size="mini"></u-button>
						</view>
					</view>
				</view>
			</view>


			<view class="list" v-else-if="tabCurrentIndex === 2">
				<view class="list-item" v-for="(item,index) in historyList" :key="item.id">
					<view class="list-item-head">
						<view class="list-item-head-left">
							订单号 {{item.orderNumber}}
						</view>
						<view class="list-item-head-right">
							已完成
						</view>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item" v-for="(item2,index2) in JSON.parse(item.shopList)"
							:key="index2">
							<view class="list-item-content-left">
								{{item2.introduce}}
							</view>
							<view class="list-item-content-right">
								×{{item2.shop_number}}
							</view>
						</view>
					</view>
					<view class="list-item-bottom">
						<view class="list-item-bottom-left">
							共计<text class="list-item-bottom-left-price">￥{{item.sumPrice}}</text>元
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<u-loadmore :status="status" :icon="true" v-if="isShow" :loadingText="loadingText"
					@loadmore="loadmore" />
			</view>
		</scroll-view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '跑腿订单',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 1,
						text: '商品订单',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 2,
						text: '商品订单历史',
						loadingType: 'more',
						orderList: []
					}
				],
				myList: [],
				myPage: 1,
				shopList: [],
				shopPage: 1,
				historyList: [],
				historyPage: 1,
				triggered: false,
				_freshing: false,
				status: 'loadmore',
				isShow: false,
				orderNumber: 0
			};
		},
		onLoad(options) {
			if (options.state) {
				this.tabCurrentIndex = parseInt(options.state)
				this.isShow = false
				this._freshing = false;
				if (this.tabCurrentIndex === 0) {
					this.getMyErrandOrder()
				} else if (this.tabCurrentIndex === 1) {
					this.getShopOrder()
				} else if (this.tabCurrentIndex === 2) {
					this.getHistoryOrder()
				}
				this.triggered = true;
				this.isShow = true
			}
			else if (options.orderNumber) {
				this.orderNumber = options.orderNumber
			}
		},
		methods: {
			async getMobile (accounts) {
				try {
					const {data: res} = await uni.$http.post('/order/getUserPhone',{accounts: accounts});
					 console.log(res);
					 if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data[0].student_card.length !== 11) return uni.showToast({
						icon: 'none',
						title: '抱歉，版本原因，拨打电话失败!!!',
						duration: 2000
					})
					const mobile = res.data[0].student_card
					uni.makePhoneCall({
						phoneNumber: mobile + '',
						success: (res) => {
					
						},
						fail: (res) => {
							console.log(res)
							uni.setClipboardData({
								//准备复制的数据
							 data: mobile + '',
								success: function(res) {
									uni.showToast({
										icon: 'none',
										title: '复制手机号成功',
										duration: 2000
									});
							 }
							})
						}
					});
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: '抱歉，拨打电话失败!!!',
						duration: 2000
					})
				}
			},
			navaGoToChat(item) {
				console.log(item)
				let obj = {
					orderNumber: item.order_number,
					contactMethod: '0',
					publicAccounts:  item.order_accounts,
					consumerAccounts: item.pb_accounts,
					accounts: item.pb_accounts,
					methods: '0',
					pb_info: item.pb_info
				}
				uni.navigateTo({
					url: '../../chat/message/message?obj=' + JSON.stringify(obj)
				})
			},
			shopGoToChat(item,order,userAccounts) {
				let obj = {
					orderNumber: order,
					contactMethod: '2',
					publicAccounts:  item.pb_accounts,
					consumerAccounts: userAccounts,
					accounts: userAccounts,
					methods: '2',
					pb_info: item.avatar
				}
				uni.navigateTo({
					url: '../../chat/message/message?obj=' + JSON.stringify(obj)
				})
			},
			scrolltolower() {
				if (this.tabCurrentIndex === 0) {
					uni.$u.throttle(this.getMyErrandOrder, 500)
				}
				if (this.tabCurrentIndex === 1) {
					uni.$u.throttle(this.getShopOrder, 500)
				}
				if (this.tabCurrentIndex === 2) {
					uni.$u.throttle(this.getHistoryOrder, 500)
				}
			},
			loadmore() {
				if (this.tabCurrentIndex === 0 && this.myList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabCurrentIndex === 1 && this.shopList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabCurrentIndex === 2 && this.historyList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
			},
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.isShow = false
				if (this.tabCurrentIndex === 0) {
					this.myList = []
					this.myPage = 1
					this.getMyErrandOrder()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabCurrentIndex === 1) {
					this.shopList = []
					this.shopPage = 1
					this.getShopOrder()
					this.triggered = false;
					this._freshing = false;
				} else {
					this.historyList = []
					this.historyPage = 1
					this.getHistoryOrder()
					this.triggered = false;
					this._freshing = false;
				}
				this.isShow = true
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			// 疑问提示
			tipBtn() {
				uni.showModal({
					title: '疑问?',
					content: '1、骑士接单信息请前往跑腿接单;2、兼职工作信息请前往我的工作;3、商品售卖请前闲置市场'
				})
			},
			// 用户确认收到商品货物
			userConfirmShopSuccess(orderNumber) {
				let _this = this
				uni.showModal({
					title: '确认收货?',
					content: '您真的已经收到了货物了吗?',
					success: async (e) => {
						if (e.confirm) {
							const {
								data: res
							} = await uni.$http.get(`/shop/userConfirmGetShop/${orderNumber}`)
							if (res.status !== 200) return uni.showToast({
								title: '确认收货失败',
								duration: 1500,
								icon: 'none'
							})
							uni.showToast({
								title: '确认收货成功',
								duration: 1500,
								icon: 'none'
							})
							setTimeout(() => {
								_this.myUp()
							}, 1500)
						}
					}
				})
			},
			// 用户申请退款
			userCanceMoney(item) {
				uni.showModal({
					title: '申请退款',
					content: '骑士可能马上接单，您真的要退款吗?',
					success: (res) => {
						if (res.confirm) {
							const {
								order_number,
								money
							} = item
							uniCloud.callFunction({
								name: 'wenxinreturn',
								data: {
									order_number: item.order_number,
									money: item.money,
									outRefundNo: item.order_number,
									action: 'return'
								},
								success: async (res) => {
									console.log(res)
									if (res.success) {
										// 操作成功
										const {
											data: res
										} = await uni.$http.post('/pay/payCance', {
											order_number: item.order_number
										})
										console.log(res)
										if (res.status !== 200) return uni.showToast({
											icon: 'none',
											title: res.message,
											duration: 2000
										})
										uni.showToast({
											icon: 'none',
											title: '退款成功，金额将在3个工作日内返回',
											duration: 4000
										})
									}
								},
								fail: (res) => {
									console.log(res)
									uni.showToast({
										icon: 'none',
										title: '退款失败,请联系管理员',
										duration: 4000
									})
								}
							})
						}
					}
				})
			},
			// 用户确认收货
			userConfirmGetErrandSuccess(id) {
				let _this = this
				uni.showModal({
					title: '确认收货?',
					content: '您真的已经收到了货物了吗?',
					success: async (e) => {
						if (e.confirm) {
							const {
								data: res
							} = await uni.$http.get(`/order/usercheckshop/${id}`)
							if (res.status !== 0) return uni.showToast({
								title: '确认收货失败',
								duration: 1500,
								icon: 'none'
							})
							uni.showToast({
								title: '确认收货成功',
								duration: 1500,
								icon: 'none'
							})
							setTimeout(() => {
								_this.shopUp()
							}, 1500)
						}
					}
				})
			},
			// 删除我的跑腿订单
			delUserOrder(id) {
				let _this = this
				uni.showModal({
					title: '删除订单?',
					content: '您真的要删除这个订单吗?',
					success: async (e) => {
						if (e.confirm) {
							const {
								data: res
							} = await uni.$http.get(`/order/delorder/${id}`)
							if (res.status !== 0) return uni.showToast({
								title: '删除失败',
								duration: 1500,
								icon: 'none'
							})
							uni.showToast({
								title: '删除成功',
								duration: 1500,
								icon: 'none'
							})
							setTimeout(() => {
								_this.myUp()
							}, 1500)
						}
					}
				})
			},
			// 获取跑腿订单
			async getMyErrandOrder() {
				this.status = 'loading';
				const {
					data: res
				} = await uni.$http.get(`/order/getuserordermessage/${this.myPage}`)
				console.log(res)
				if (res.status !== 0) return uni.showToast({
					title: '获取我的的订单信息失败,请登录后尝试',
					duration: 1500,
					icon: 'none'
				})
				if (res.data.length === 0) return this.status = 'nomore';
				this.myList = [...this.myList, ...res.data]
				this.myPage++
			},
			// 获取商品订单
			async getShopOrder() {
				this.status = 'loading';
				const {
					data: res
				} = await uni.$http.get(`/shop/getUserBuyShop/${this.shopPage}`)
				if (res.status !== 200) return uni.showToast({
					title: '获取商品的订单信息失败,请登录后尝试',
					duration: 1500,
					icon: 'none'
				})
				if (res.data.length === 0) return this.status = 'nomore';
				this.shopList = [...this.shopList, ...res.data]
				this.shopPage++
			},
			// 获取历史订单
			async getHistoryOrder() {
				this.status = 'loading';
				const {
					data: res
				} = await uni.$http.get(`/shop/getUserBuyShopHistory/${this.historyPage}`)
				if (res.status !== 200) return uni.showToast({
					title: '获取商品历史订单信息失败,请登录后尝试',
					duration: 1500,
					icon: 'none'
				})
				if (res.data.length === 0) return this.status = 'nomore';
				this.historyList = [...this.historyList, ...res.data]
				this.historyPage++
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			}

		},
	}
</script>

<style lang="scss">
	.phone-box {
		position: absolute;
		right: 5%;
		top: 20%;
	}
	.errand-btn-right {
		display: flex;
		.contact-box {
			position: relative;
			margin-right: 10px;
		}
	}
	// 私信
	
	// 疑问
	.question {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background: #c4c6c9;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 5%;
		bottom: 10%;
		z-index: 999;
	}

	.list {
		
		.list-item {
			padding: 5px 10px;
			background-color: #FFFFFF;
			box-shadow: 1px 1px 2px 1px #FCFCFC;
			border-radius: 5px;
			margin: 5px 0;

			.list-item-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5px;

				.list-item-head-left {
					font-size: 12px;
					color: #C4C6C9;
				}

				.list-item-head-right {
					font-weight: 700;
					font-size: 14px;
				}
			}

			.list-item-content {
				background-color: #F3F4F6;
				padding: 5px 10px;

				.list-item-content-item {
					font-size: 13px;
					color: #909399;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 5px 0;

					.list-item-content-left {
						width: 80%;
					}

					.list-item-content-right {
						display: flex;
						width: 20%;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.list-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10px 0;

				.list-item-bottom-left {
					font-size: 13px;
					color: #909399;

					.list-item-bottom-left-number {
						color: #303133;
						font-size: 14px;
						font-weight: bold;
					}

					.list-item-bottom-left-price {
						font-size: 16px;
						color: #f9ae3d;
					}
				}

				.list-item-bottom-right {
					display: flex;
					
				}
			}
		}
	}

	.errand-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.u-demo-block__title {
		padding-right: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.top-left-button {
			display: flex;

			width: 60px;
			margin-bottom: 5px;
		}

		.top-right-time {
			color: #909399;
			font-size: 13px;
			
		}
	}

	.u-page {
		width: 95%;
		margin: 10px 2%;
		position: relative;



	}

	.u-demo-block {
		position: relative;
		margin-top: 10px;
		padding: 10px 5px;
		border-radius: 5px;
		background-color: #FFF;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}

	page {
		background-color: #f8f8f8;
	}

	.item {
		box-shadow: 1px 1px 1px #FFF7CC;
		position: relative;
		width: 90%;
		border: 1px solid #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 5px;
		margin: 5px 10px 5px 13px;
		padding: 8px 5px;

		.left {
			height: 120px;

			margin-right: 8px;

			.info {
				border-radius: 50%;
				width: 40px;
				height: 40px;
				border: 1px solid #07C160;
			}
		}

		.right {
			.name {
				white-space: normal;
				word-break: break-all;
				font-weight: 900;
				font-size: 14px;
				margin-bottom: 2px;
			}

			.time {
				white-space: normal;
				word-break: break-all;
				font-size: 12px;
				color: #07C160;
				margin-bottom: 2px;
			}

			.help_information {
				white-space: normal;
				word-break: break-all;
				font-size: 13px;
				margin-bottom: 2px;
			}

			.qd {
				white-space: normal;
				word-break: break-all;
				font-size: 12px;
				color: #07C160;
				margin-bottom: 2px;
			}

			.mdd {
				white-space: normal;
				word-break: break-all;
				font-size: 12px;
				color: #007AFF;
				margin-bottom: 5px;
			}

			.btn {
				display: flex;
				justify-content: left;
				align-items: center;

				.money {
					color: #C00000;
					font-size: 12px;
					border-radius: 5px;
					margin-right: 10px;
				}

				.jd {
					background-color: #007AFF;
					color: #F0F0F0;
					font-size: 12px;
					border-radius: 5px;
				}
			}
		}
	}

	.htlp {
		position: absolute;
		right: 5px;
		top: 10px;
		opacity: 0.9;
		color: #07C160;
		font-size: 10px;
		border-radius: 5px;
	}

	.end_img {
		width: 70px;
		height: 80px;
	}

	.end {
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		margin-bottom: 5px;
		color: #000000;
	}

	.mmm {
		color: #C00000;
	}

	.xql {
		margin-right: 10px;
	}

	.icon_about_ {
		width: 30px;
		height: 30px;

	}

	.icon_about {
		position: absolute;
		right: 20px;
		bottom: 40px;
	}

	.icon_phone {
		bottom: 40px;
		position: absolute;
		right: 20px;
	}

	.tc {
		background-color: #ffff00;
		color: #FFFFFF;
	}

	.sc {
		background-color: #C00000;
		color: #FFFFFF;
	}

	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>
